<template>
  <div class="center-container">
    <Headbar />
    <HeadMenu />
    <Hungbar />
    <!-- 轮播图 -->
    <div class="brand-swiper">
        <el-carousel :interval="5000" height="500px" arrow="never">
            <el-carousel-item v-for="(item,index) in bannerList">
                <div class="brandBannerImg" v-bind:style="{'background-image':'url('+URL.PIC+ item.resourceUrl+')'}"></div>
            </el-carousel-item>
        </el-carousel>
    </div>
    <!-- 轮播图 -->
    <div class="brand-introduce">
        <div class="brand-story-item">
            <div class="brand-story">
                <div class="common-title-bold">品牌故事</div>
                <div class="english-title">BRAND STORY</div>
            </div>
            <div class="brand-explain">
                <div class="brand-pic">
                    <div class="brand-img">
                        <img :src="URL.PIC+ ruleForm.brandLogo"/>
                    </div>
                </div>
                <div class="brand-right-con">
                    <p class="brand-exp">
                        {{ruleForm.brandTale}}
                    </p>
                </div>
            </div>
        </div>
        <div class="recommend-item">
            <div class="recommend-title">
                <div class="common-title-bold">新品推荐</div>
                <div class="english-title">NEW ARRIVALS</div>
            </div>
            <div class="recommend-list">
                <div class="recommend-box">
                    <div class="recommend-newPD" v-for="(recom,index) in recommendList">                    
                        <img :src="recom.pdUrl"/>
                        <div class="PD-price">￥{{recom.price}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hot-item">
            <div class="hot-title">
                <div class="common-title-bold">热销商品</div>
                <div class="english-title">HOT COMMODITIES</div>
            </div>
            <div class="hot-list" >
                <div class="hot-leftM">
                    <div class="hot-salePD" v-for="(hotList,i) in hotArray">
                        <img class="hot-sale-img" :src="hotList.imgUrl"/>
                        <p class="pd-title">{{ hotList.title }}</p>
                        <div class="hot-pd-price">￥{{ hotList.price }}</div>
                    </div>                
                </div>
            </div>
        </div>
    </div>
    <Footbars />     
    
  </div>
</template>
<script>
import Headbar from '@/components/Layouts/Headbar'
import HeadMenu from '@/components/Layouts/HeadMenu'
import Hungbar from '@/components/Layouts/Hungbar'
import Footbars from '@/components/Layouts/Footbars'
import {getPicList,getTradeList,getBrandList,getBrandDetail,productNewsList , productHotList} from '@/api/news'
export default {
  name: 'Introduce',
  components: {
    Headbar,
    HeadMenu,
    Hungbar,
    Footbars, 
  },
  data() {
    return {
        bannerList:[],
        brandId:this.getUrlParams('brandId'),
        ruleForm: {
            id:null,
            brandName:null,
            brandEnglishName:null,
            brandTale:null,
            brandLogo:null,
        },
        recommendList:[],
        hotArray:[],
    }
  },
  created() {
      this.getBannerList();
      if(this.brandId !=null && this.brandId!=undefined && this.brandId!=0){
          this.getBrandDetail(this.brandId);
      }
  },
  methods: {
      //获取品牌中心首页banner 图
      getBannerList(){
          getPicList({
              positionCode: 'brand_index',
              device: 'pc'
          }).then(res=>{
              this.bannerList = res.data;
          })
      },
      //获取当前品牌详情
      getBrandDetail(id){
          getBrandDetail({brandId:id}).then(res=>{
              this.ruleForm = res.data;
              this.productNewsList(this.ruleForm.brandName);
              this.productHotList(this.ruleForm.brandName);
          });
      },
      //热销 、 推荐商品
      productNewsList(brandName){
          productNewsList({brand:brandName}).then(res =>{
              this.recommendList = res.data.list;
          });
      } ,
      productHotList(brandName){
          productHotList({brand:brandName}).then(res =>{
              this.hotArray = res.data.list;
          });
      }
  }
}
</script>
<style lang="scss" scoped> 
.center-container{
    width: 100%;
    min-width: 1200px;
    background: #f7f7f7;
    .brand-swiper{
        .brandBannerImg{
            width: 100%;
            height: 500px;
            min-width: 1200px;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }
    }
   .brand-introduce{
       width: 1200px;
       margin: 0 auto;
       text-align: center;
       img{
           width: 100%;
       }
       .brand-story-item{
           .brand-explain{
               height: 280px;
               background: #E9E9E9;
               border-radius: 10px;
               .brand-pic{
                   overflow: hidden;
                   float: left;
                   .brand-img{
                       width: 220px;
                       height: 220px;
                       margin: 30px;
                       background: #fff;
                   }
               }
               .brand-right-con{
                   float: left;
                   margin: 30px 0;
                   width: 885px;
                   height: 220px;
                   overflow: hidden;
                   .brand-exp{
                       margin: 20px;
                       line-height: 25px;
                       text-align: left;
                        // display: -webkit-box;
                        // -webkit-box-orient: vertical;
                        // -webkit-line-clamp:9;
                        // overflow: hidden;
                   }
               }
           }
       }
       .recommend-item{
           .recommend-list{
                overflow: hidden;
                zoom: 1;
                .recommend-box{
                    width: 1225px;
                    margin-left: -25px;
                    overflow: hidden;
                    zoom: 1;
                    .recommend-newPD{
                        width: 280px;
                        height: 280px;
                        background: #fff;
                        border-radius: 10px;
                        // margin-right: 25px;
                        margin-left: 25px;
                        float: left;
                        position: relative;
                        .PD-price{
                            width: 280px;
                            height: 50px;
                            line-height: 50px;
                            background: rgba(0,0,0,.4);
                            position: absolute;
                            bottom: 0;
                            color: #fff;
                            font-size: 24px;
                            border-radius: 0 0 10px 10px;
                        }
                    }
                }
               
            //    .recommend-newPD:last-child{
            //        margin-right: 0;
            //    }
           }
       }
        .hot-item{
            .hot-list{
                width: 1200px;
                .hot-leftM{
                    width: 1228px;
                    margin: 0 0 0 -35px;
                    .hot-salePD{
                        width: 210px;
                        height: 300px;
                        // background: #fff;
                        float: left;
                        margin: 0 0 15px 35px;
                        border-radius: 10px;
                        .hot-sale-img{
                            width: 210px;
                            height: 210px;
                            border-radius: 10px;
                        }
                        .pd-title{
                            text-align: left;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp:2;
                            overflow: hidden;
                            padding: 0 10px;
                            font-size: 14px;
                            color: #333;
                            margin: 9px 0;                            
                        }
                        .hot-pd-price{
                            color: #D0021B;
                            font-size: 16px;
                        }
                    }
                }
                
            }
        }
    }
}
.common-title-bold{
    color: #333;
    font-size: 30px;
    font-weight: bold;
    margin-top: 40px;
}
.english-title{
    font-size: 14px;
    color: #999;
    margin: 10px auto 15px;
}
</style>
<style lang="scss">
.el-carousel__indicator .el-carousel__button{
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

</style>
